<template>
  <el-dialog
    class="box-dialog"
    :title="title"
    :visible.sync="dialogFormVisible"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="ruleForms"
      size="small"
      class="demo-form-inline"
      label-width="80px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="工单编号" prop="workorder_code">
            <el-input
              v-model="ruleForms.workorder_code"
              placeholder="请输入工单编号"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="工单名称" prop="workorder_name">
            <el-input
              v-model="ruleForms.workorder_name"
              placeholder="请输入工单名称"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">

      <el-form-item label="来源类型" prop="order_source">
        <el-radio-group v-model="ruleForms.order_source">
          <el-radio label="客户">客户订单</el-radio>
          <el-radio label="库存">库存备货</el-radio>
        </el-radio-group>
      </el-form-item>
        </el-col>
      <el-col :span="12">
          <el-form-item label="单据状态" prop="status">
            <el-input disabled :value="ruleForms.status==1?'已确认':'草稿'"
            ></el-input> </el-form-item
        >
      </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="产品编号" prop="product_code">
            <el-input placeholder="请选择产品编号" v-model="ruleForms.product_code" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品名称" prop="product_name">
            <el-input
              v-model="ruleForms.product_name"
              disabled
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"  v-if="islook">
          <el-form-item label="规格型号" prop="specification">
            <el-input
              v-model="ruleForms.specification"
              disabled
            ></el-input> </el-form-item
        >
        </el-col>
        <el-col :span="12"  v-if="islook">
<el-form-item label="单位" prop="unit_of_measure">
            <el-input
              v-model="ruleForms.unit_of_measure"
              disabled
            ></el-input> </el-form-item
        >
        </el-col>
        <el-col :span="12">
          <el-form-item label="工单数量" prop="quantity">
            <el-input-number
              v-model="ruleForms.quantity"
              @change="handleChange"
              :min="1"
            ></el-input-number></el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="批次号" prop="batch_code">
            <el-input v-model="ruleForms.batch_code"></el-input> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="需求日期" prop="request_date">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd"
              v-model="ruleForms.request_date"
              placeholder="请选择需求日期"
            ></el-date-picker></el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <el-card v-if="islook">
      <div slot="header">
        BOM物料组成表
      </div>
<el-table
    :data="tableData"
    style="width: 100%"
    max-height="250">
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-card>
    
    <div slot="footer" class="dialog-footer">
      <el-button
        style="padding: 10px 25px; margin-right: 10px"
        size="samll"
        @click="status"
        >取 消</el-button
      >
      <el-button
        style="padding: 10px 25px"
        size="samll"
        slot="reference"
        @click="save"
        type="primary"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    isUpdate: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    dialogFormVisible: {
      type: Boolean,
      required: true,
    },
    ruleForms: {
      type: Object,
      required: true,
    },
    rules: {
      type: Object,
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
    islook:{
      type:Boolean,
      required:true
    }
  },
  methods: {
    closeDialog(e) {
      this.$emit("closeDialog", e);
    },
    save(e) {
      this.$refs.dataForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          this.$emit("save", e);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleChange(e) {
      this.$emit("handleChange", e);
    },
    status(e) {
      this.$emit("status", e);
    },
  },
};
</script>

<style scoped>

</style>